<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="类型" prop="iTroubleshooting">
        <common-check-type-select v-model="queryParams.iTroubleshooting" :parentId="0" placeholder="请输入选择类型"></common-check-type-select>
      </el-form-item>
      <el-form-item label="路线名称" prop="roadName">
          <el-input v-model="queryParams.roadName" placeholder="请输入路线名称" clearable @change="handleQuery" />
        </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane :label="'待审核（'+ page2.total +'）'" name="2">
        <el-table v-loading="loading2" :row-style="rowStyle" :highlight-current-row="true" :data="tableData2">
          <el-table-column type="index" :index="(index)=>tableIndex(page2.pageSize,page2.pageNum,index)" label="序号" align="center" />
          <el-table-column label="路线名称" align="center" prop="roadName" width="150" />
          <el-table-column label="类型" align="center" prop="iTroubleshooting" width="150">
            <template slot-scope="scope">
              {{getCheckTypeName(scope.row.iTroubleshooting)  || "--"}}
            </template>
          </el-table-column>
          <el-table-column label="作业项目" align="center" prop="quantitativeTypeName" width="150"/>
          <el-table-column label="位置桩号" align="center" prop="locationNum" width="150">
            <template slot-scope="scope">
              {{ scope.row.locationNum || "--"}}
            </template>
          </el-table-column>
          <el-table-column label="完成工作量" align="center" prop="taskNum" width="150" />
          <el-table-column label="工作量单位" align="center" prop="numUnit" width="150" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.jl_case_unit" :value="scope.row.numUnit"></dict-tag>
            </template>
          </el-table-column>          <el-table-column label="排查时间" align="center" prop="troubleshootingTime" width="150" />
          <el-table-column label="提交时间" align="center" prop="createTime" width="180" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-s-check" @click="handleAudit(scope.row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="page2.total > 0" :total="page2.total" :page.sync="page2.pageNum" :limit.sync="page2.pageSize" @pagination="getList2" />
      </el-tab-pane>
      <el-tab-pane :label="'已审核（'+ page3.total +'）'" name="3">
        <el-table v-loading="loading3" :row-style="rowStyle" :highlight-current-row="true" :data="tableData3">
          <el-table-column type="index" :index="(index)=>tableIndex(page3.pageSize,page3.pageNum,index)" label="序号" align="center" />
          <el-table-column label="路线名称" align="center" prop="roadName" />
          <el-table-column label="类型" align="center" prop="iTroubleshooting" width="150">
            <template slot-scope="scope">
              {{getCheckTypeName(scope.row.iTroubleshooting)  || "--"}}
            </template>
          </el-table-column>
          <el-table-column label="作业项目" align="center" prop="quantitativeTypeName" width="150"/>
          <el-table-column label="位置桩号" align="center" prop="locationNum" width="150">
            <template slot-scope="scope">
              {{ scope.row.locationNum || "--"}}
            </template>
          </el-table-column>
          <el-table-column label="完成工作量" align="center" prop="taskNum" width="150" />
          <el-table-column label="工作量单位" align="center" prop="numUnit" width="150" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.jl_case_unit" :value="scope.row.numUnit"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="dataStatus" width="150">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.jl_data_status" :value="scope.row.dataStatus"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="排查时间" align="center" prop="troubleshootingTime" width="150" />
          <el-table-column label="提交时间" align="center" prop="createTime" width="180" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="page3.total > 0" :total="page3.total" :page.sync="page3.pageNum" :limit.sync="page3.pageSize" @pagination="getList3" />
      </el-tab-pane>
    </el-tabs>
    <trouble-shooting-audit-dialog ref="troubleShootingAuditDialog" @updateTable="updateTable"></trouble-shooting-audit-dialog>
    <trouble-shooting-detail-dialog ref="troubleShootingDetailDialog" title="工作审核--详情"></trouble-shooting-detail-dialog>
  </div>
</template>

<script>
import {
  listTroubleShooting,
  getTroubleShooting,
} from "@/api/cases/troubleShooting";
import CommonCheckTypeSelect from '../../../components/Select/CommonCheckTypeSelect.vue';
import DictSelect from '../../../components/Select/DictSelect.vue';
import DeptUserSelect from '../../../components/Select/DeptUserSelect.vue';
import { listCommonCheckType } from '@/api/cases/commonCheckType'
import { mapGetters } from 'vuex';
import TroubleShootingDetailDialog from '../../../components/Dialog/troubleShootingDetailDialog.vue';
import TroubleShootingAuditDialog from '../../../components/Dialog/troubleShootingAuditDialog.vue';

export default {
  name: "troubleShooting",
  dicts: ["jl_cases_damage_level", "jl_cases_repair_method", "jl_data_status", "jl_measurement_unit","jl_case_unit"],
  components: { DictSelect, CommonCheckTypeSelect, DictSelect, DeptUserSelect, TroubleShootingDetailDialog, TroubleShootingAuditDialog },
  data() {
    return {
      // 遮罩层
      loading2: true,
      // 遮罩层
      loading3: true,
      // 表格数据
      tableData2: [],
      // 表格数据
      tableData3: [],
      // 查询参数
      queryParams: {
        iTroubleshooting: void 0,
        roadName: void 0,
      },
      //表格2的分页
      page2: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      //表格3的分页
      page3: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      //检查类型
      checkTypes: [],
      //当前激活的tab
      activeName: "2"
    };
  },
  async created() {
    await this.getCheckTypes();
    this.getList2();
    this.getList3();
  },
  computed: {
    ...mapGetters(["userId"]),
    // 表单校验
    rules() {
      return {
        dataStatus: [
          { required: true, message: "审核结果不能为空", trigger: "change" },
        ],
        auditMessage: [
          { required: true, message: "审核意见不能为空", trigger: "blur" },
        ],
      }
    },
  },
  watch: {
  },
  methods: {
    /** 查询排查审核管理列表 */
    getList2() {
      this.loading2 = true;
      let params = Object.assign({}, this.queryParams, this.page2, {
        dataStatusList: 2,
        auditUserId: this.userId
      })
      listTroubleShooting(params).then((response) => {
        this.tableData2 = response.rows;
        this.page2.total = response.total;
        this.loading2 = false;
      });
    },
    /** 查询排查审核管理列表 */
    getList3() {
      this.loading3 = true;
      let params = Object.assign({}, this.queryParams, this.page3, {
        dataStatusList: [3,5,6,7],
        auditUserId: this.userId
      })
      listTroubleShooting(params).then((response) => {
        this.tableData3 = response.rows;
        this.page3.total = response.total;
        this.loading3 = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.page2.pageNum = 1;
      this.page3.pageNum = 1;
      this.getList2();
      this.getList3();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查看 */
    handleDetail(row) {
      const id = row.id;
      getTroubleShooting(id).then((response) => {
        let form = response.data;
        this.$refs.troubleShootingDetailDialog.open(form)
      });
    },
    /**
     * 审核
     */
    handleAudit(row) {
      const id = row.id;
      this.$refs.troubleShootingAuditDialog.open(id)
    },
    /**
     * 更新表格
     */
    updateTable(){
      this.getList2();
      this.getList3();
    },  
    /**
     * 行样式
     */
    rowStyle() {
      return {
        "cursor": "pointer"
      }
    },
    /**
     * 获取类型
     */
    getCheckTypes() {
      let params = {
        status: 0,
        delFlag: 0
      }
      return new Promise((resolve, reject) => {
        listCommonCheckType(params).then(res => {
          this.checkTypes = res.data;
          resolve()
        }).catch(() => {
          this.checkTypes = [];
          reject()
        })
      })
    },
    /**
     * 获取检查的名称
     */
    getCheckTypeName(checkType) {
      let index = this.checkTypes.findIndex((item) => {
        return item.id == checkType;
      })
      if (index > -1) {
        return this.checkTypes[index].checkTypeName
      } else {
        return ""
      }
    },
    /**
     * 处理标签点击
     */
    handleTabClick() {
      if (this.activeName == "2") {
        this.getList2();
      } else {
        this.getList3();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.form-title {
  padding: 2px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}
.input-sperator {
  margin-right: 10px;
  margin-left: 10px;
  padding-bottom: 18px;
  line-height: 29px;
}
</style>
